<!--
 * @description 组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view
		class="pure-radio-group"
		:class="_classes"
		:style="_styles"
	>
		<slot>
			<pure-radio
				v-for="(item, index) in options"
				:key="index"
				:hoverClass="hoverClass"
				:label="item[_props.labelKey]"
				:value="item[_props.valueKey]"
				v-bind="item || {}"
			></pure-radio>
		</slot>
	</view>
</template>

<script>
	import commonComponentOptions from "../../config/options";
	export default {
		options: commonComponentOptions
	};
</script>

<script setup>
	import { ref, computed, provide, inject, useAttrs } from "vue";
	import props from "./props";
	import { getThemeValue } from "../../utils";

	// -------------------------------------------------------------------------------- Props
	const _props = defineProps(props);

	// -------------------------------------------------------------------------------- Injects
	// 表单项 change 事件
	const PureFormItemOnChange = inject("PureFormItemOnChange", null);

	// -------------------------------------------------------------------------------- Emits
	const _emits = defineEmits(["update:modelValue"]);

	// -------------------------------------------------------------------------------- Classes
	const _classes = computed(() => {
		const array = [];

		// 只读
		if (_props.readonly) array.push("pure-radio-group--readonly");

		// 禁用
		if (_props.disabled) array.push("pure-radio-group--disabled");

		// 子元素是否单独占用一行
		if (_props.block) array.push("pure-radio-group--block-items");

		// 标签在前，勾选框在后
		if (_props.reverse) array.push("pure-radio-group--reverse-items");

		// 选项卡模式
		if (_props.tabs) array.push("pure-radio-group--tabs");

		return array;
	});

	// -------------------------------------------------------------------------------- Styles
	const _styles = computed(() => {
		const array = [];

		// 主题
		if (_props.theme) array.push(`--pure-radio-theme: ${getThemeValue(_props.theme)}`);

		// 框框尺寸
		if (_props.size) array.push(`--pure-radio-box-size: ${_props.size}`);

		// 默认颜色
		if (_props.defaultColor) array.push(`--pure-radio-box-background: ${_props.defaultColor}`);

		// 激活时的颜色
		if (_props.activeColor) array.push(`--pure-radio-checked-box-background: ${_props.activeColor}`);

		// 图标颜色
		if (_props.iconColor) array.push(`--pure-radio-icon-color: ${_props.iconColor}`);

		return array;
	});

	// 切换事件
	function _handleChange(value) {
		_emits("update:modelValue", value);

		// 向表单项提交 change 事件
		PureFormItemOnChange?.();
	}

	// 选中值
	provide(
		"PureRadioGroupModelValue",
		computed(() => _props.modelValue)
	);

	// 更新方法
	provide("PureRadioGroupUpdateFn", _handleChange);

	// 主题
	provide(
		"PureRadioGroupTheme",
		computed(() => _props.theme)
	);

	// 幽灵样式
	provide(
		"PureRadioGroupGhost",
		computed(() => _props.ghost)
	);

	// 镂空
	provide(
		"PureRadioGroupPlain",
		computed(() => _props.plain)
	);

	// 方形框
	provide(
		"PureRadioGroupSquare",
		computed(() => _props.square)
	);

	// 图标颜色
	provide(
		"PureRadioGroupIconColor",
		computed(() => _props.iconColor)
	);

	// 图标
	provide(
		"PureRadioGroupIconName",
		computed(() => _props.iconName)
	);

	// 选项卡模式
	provide(
		"PureRadioGroupTabs",
		computed(() => _props.tabs)
	);
</script>

<style scoped lang="scss">
	@import "./style.scss";
</style>
